<template>
  <div class="space-y-6">
    <!-- 数据概览卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      <div class="card p-6">
        <div class="flex items-start justify-between">
          <div>
            <p class="text-gray-500 text-sm">已创建站点</p>
            <h3 class="text-3xl font-bold mt-2">12</h3>
            <p class="text-success text-sm mt-2 flex items-center">
              <i class="fa fa-arrow-up mr-1"></i> 较上月增长 16.7%
            </p>
          </div>
          <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
            <i class="fa fa-globe text-xl"></i>
          </div>
        </div>
      </div>
      
      <div class="card p-6">
        <div class="flex items-start justify-between">
          <div>
            <p class="text-gray-500 text-sm">页面总数</p>
            <h3 class="text-3xl font-bold mt-2">86</h3>
            <p class="text-success text-sm mt-2 flex items-center">
              <i class="fa fa-arrow-up mr-1"></i> 较上月增长 8.2%
            </p>
          </div>
          <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
            <i class="fa fa-file-o text-xl"></i>
          </div>
        </div>
      </div>
      
      <div class="card p-6">
        <div class="flex items-start justify-between">
          <div>
            <p class="text-gray-500 text-sm">文章内容</p>
            <h3 class="text-3xl font-bold mt-2">254</h3>
            <p class="text-success text-sm mt-2 flex items-center">
              <i class="fa fa-arrow-up mr-1"></i> 较上月增长 12.3%
            </p>
          </div>
          <div class="w-12 h-12 rounded-lg bg-success/10 flex items-center justify-center text-success">
            <i class="fa fa-file-text-o text-xl"></i>
          </div>
        </div>
      </div>
      
      <div class="card p-6">
        <div class="flex items-start justify-between">
          <div>
            <p class="text-gray-500 text-sm">本月访问量</p>
            <h3 class="text-3xl font-bold mt-2">12,589</h3>
            <p class="text-danger text-sm mt-2 flex items-center">
              <i class="fa fa-arrow-down mr-1"></i> 较上月下降 3.1%
            </p>
          </div>
          <div class="w-12 h-12 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
            <i class="fa fa-eye text-xl"></i>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 图表和最近活动 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="card p-6 lg:col-span-2">
        <div class="flex items-center justify-between mb-6">
          <h3 class="font-semibold text-lg">访问量趋势</h3>
          <div class="flex gap-2">
            <button class="px-3 py-1 text-sm rounded bg-primary/10 text-primary">日</button>
            <button class="px-3 py-1 text-sm rounded text-gray-500 hover:bg-gray-100">周</button>
            <button class="px-3 py-1 text-sm rounded text-gray-500 hover:bg-gray-100">月</button>
          </div>
        </div>
        <div class="h-80">
          <canvas id="visitsChart"></canvas>
        </div>
      </div>
      
      <div class="card p-6">
        <div class="flex items-center justify-between mb-6">
          <h3 class="font-semibold text-lg">访问设备分布</h3>
          <button class="text-gray-400 hover:text-primary">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
        <div class="h-64">
          <canvas id="devicesChart"></canvas>
        </div>
        <div class="mt-6 space-y-4">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <span class="w-3 h-3 rounded-full bg-primary"></span>
              <span class="text-sm">桌面设备</span>
            </div>
            <span class="font-medium">58%</span>
          </div>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <span class="w-3 h-3 rounded-full bg-secondary"></span>
              <span class="text-sm">移动设备</span>
            </div>
            <span class="font-medium">36%</span>
          </div>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <span class="w-3 h-3 rounded-full bg-warning"></span>
              <span class="text-sm">平板设备</span>
            </div>
            <span class="font-medium">6%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Chart } from 'chart.js/auto'

const router = useRouter()

// 初始化图表
const initCharts = () => {
  // 访问量趋势图
  const visitsCtx = document.getElementById('visitsChart')
  if (visitsCtx) {
    new Chart(visitsCtx, {
      type: 'line',
      data: {
        labels: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日'],
        datasets: [{
          label: '访问量',
          data: [320, 380, 420, 360, 480, 520, 490, 560, 620, 580, 650, 720, 680, 750],
          borderColor: '#165DFF',
          backgroundColor: 'rgba(22, 93, 255, 0.1)',
          tension: 0.4,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              color: 'rgba(0, 0, 0, 0.05)'
            }
          },
          x: {
            grid: {
              display: false
            }
          }
        }
      }
    })
  }
  
  // 设备分布饼图
  const devicesCtx = document.getElementById('devicesChart')
  if (devicesCtx) {
    new Chart(devicesCtx, {
      type: 'doughnut',
      data: {
        labels: ['桌面设备', '移动设备', '平板设备'],
        datasets: [{
          data: [58, 36, 6],
          backgroundColor: [
            '#165DFF',
            '#0FC6C2',
            '#FF7D00'
          ],
          borderWidth: 0
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        cutout: '70%'
      }
    })
  }
}

onMounted(() => {
  initCharts()
})
</script>

<style scoped>
</style>
